import React from 'react'
import { useRecoilState } from 'recoil'
import { designerState } from '../../../../../store'
import { Tabs, Card, Button, Collapse, Select, Form, Switch, Radio, Input, message } from 'antd'
import { EditOutlined, RedoOutlined, SettingOutlined } from '@ant-design/icons';
import { produce } from 'immer';

const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;

interface IProps {
  children?: any;
}

const layout = {
  labelCol: { span: 9 },
  wrapperCol: { span: 15 }
}

export default function FlexConfig (props: IProps) {
  const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);

  // 更新选中节点
  const updateAttr = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.attr[key] = value
    })
    setSelectedNode(newItem)
  }

  // 更新样式
  const updateStyle = (key: string, value: any) => {
    const newItem = produce(selectedNode, (draft: any) => {
      draft.config.style[key] = value
    })
    setSelectedNode(newItem)
  }

  // 是否开启自动轮播
  const changeAutoplay = (value: any) => {
    updateAttr("autoplay", value)
  };

  // 指示点位置
  const changeDisplay = (e: any) => {
    updateStyle("display", e.target.value)
  };

  // 主轴方向
  const changeDirection = (value: string) => {
    updateStyle("flexDirection", value)
  };

  // 主轴排序
  const changeJustifyContent = (value: string) => {
    updateStyle("justifyContent", value)
  };

  // 交叉轴排序
  const changeAlignItems = (value: string) => {
    updateStyle("alignItems", value)
  };

  // 弹性换行
  const changeFlexWrap = (value: string) => {
    updateStyle("flexWrap", value)
  };
  
  const handleChange = (activeKey: any) => {
    console.log(123, activeKey)
  }

  // 设置高度
  const changeStyleHeight = (e: any) => {
    updateStyle("height", e.target.value)
  };

  // 设置宽度
  const changeStyleWidth = (e: any) => {
    updateStyle("width", e.target.value)
  };

  return (
    <Tabs defaultActiveKey="2">
      <TabPane tab='元数据' key="1">
        <Card
          type="inner"
          title="轮播图"
          actions={[
            <Button type="text" onClick={() => message.info('访问主页') } key="1">
              <EditOutlined />
            </Button>,
            <Button type="text" onClick={() => message.info('编辑内容') } key="2">
              <SettingOutlined  />
            </Button>,
            <Button type="text" onClick={() => message.info('复制到其他工程') } key="3">
              <RedoOutlined />
            </Button>,
          ]}
        >
          <p>ID:  { selectedNode.meta.id }</p>
          <p>类型：{ selectedNode.meta.type }</p>
          <p>标识：{ selectedNode.meta.name }</p>
          <p>名称：{ selectedNode.meta.title }</p>
          <p>版本：1.0.0</p>
          <p>作者：张三</p>
        </Card>
      </TabPane>
      <TabPane tab='属性' key="2">
        <Collapse defaultActiveKey={['1', '2']} bordered={true} ghost={false} onChange={ handleChange }>
          <Panel header="属性" key="1" showArrow={false}>
            <Form
              // ref={this.form}
              {...layout}
              // onFinish={ onFinish }
              // initialValues={{ username: '小花狗不见了', prefix: '猜猜我是谁' }}
            >
              <Form.Item label='自动播放'>
                <Switch
                  checked={ selectedNode.config.attr.autoplay }
                  onChange={ changeAutoplay }
                  checkedChildren={"是"}
                  unCheckedChildren={"否"}
                />
              </Form.Item>    
            </Form>
          </Panel>
          <Panel header="样式" key="2" showArrow={false}>
            <Form
              // ref={this.form}
              {...layout}
              // onFinish={ onFinish }
              // initialValues={{ username: '小花狗不见了', prefix: '猜猜我是谁' }}
            >
              <Form.Item label='高度'>
                <Input 
                  onChange={ changeStyleHeight }
                  value={ selectedNode.config.style.height }
                />
              </Form.Item>
              <Form.Item label='宽度'>
                <Input 
                  onChange={ changeStyleWidth }
                  value={ selectedNode.config.style.width }
                />
              </Form.Item>

              <Form.Item label='显示方式'>
                <Radio.Group 
                  defaultValue={ selectedNode.config?.style.display }
                  value={ selectedNode.config?.style.display }
                  onChange={ changeDisplay }
                >
                  <Radio.Button value='block'>block</Radio.Button>
                  <Radio.Button value='flex'>flex</Radio.Button>
                </Radio.Group>
              </Form.Item>

              <Form.Item label='主轴方向'>
                <Select defaultValue={ selectedNode.config?.style.flexDirection } onChange={ changeDirection }>
                  <Option value="row">row(默认)</Option>
                  <Option value="row-reverse">row-reverse</Option>
                  <Option value="column">column</Option>
                  <Option value="column-reverse">column-reverse</Option>
                </Select>
              </Form.Item>

              <Form.Item label='主轴对齐'>
                <Select defaultValue={ selectedNode.config?.style.justifyContent } onChange={ changeJustifyContent }>
                  <Option value="flex-start">flex-start(默认)</Option>
                  <Option value="center">center</Option>
                  <Option value="flex-end">flex-end</Option>
                  <Option value="space-between">space-between</Option>
                  <Option value="space-around">space-around</Option>
                </Select>
              </Form.Item>

              <Form.Item label='交叉轴对齐'>
                <Select defaultValue={ selectedNode.config?.style.alignItems } onChange={ changeAlignItems }>
                  <Option value="stretch">stretch(默认)</Option>
                  <Option value="flex-start">flex-start</Option>
                  <Option value="center">center</Option>
                  <Option value="flex-end">flex-end</Option>
                  <Option value="baseline">baseline</Option>
                </Select>
              </Form.Item>
              
              <Form.Item label='弹性换行'>
                <Select defaultValue={ selectedNode.config?.style.flexWrap } onChange={ changeFlexWrap }>
                  <Option value="nowrap">nowrap(默认)</Option>
                  <Option value="wrap">wrap</Option>
                  <Option value="wrap-reverse">wrap-reverse</Option>
                </Select>
              </Form.Item>
            </Form>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane tab='数据' key="3">
        <Collapse defaultActiveKey={['1', '2']} bordered={true} ghost={false} onChange={ handleChange }>
          <Panel header="基础数据" key="1" showArrow={false}>
            { JSON.stringify(selectedNode.data.raw) }
          </Panel>
          <Panel header="上下文" key="2" showArrow={false}>
            More to come~
          </Panel>
        </Collapse>
      </TabPane>
    </Tabs>
  )
}